import React, { Component } from 'react'
import { NavBar, Icon, Carousel, Toast } from 'antd-mobile';
import './GoodDetail.scss'
import myaxios from "../../utils/myaxios"
export default class GoodDetail extends Component {
  state = {
    goodInfo: {},
    imgHeight: 250,
    /* 设置轮播图是否显示 默认情况不显示 */
    showSwiper: false,
    showCollect: false, //收藏
  }
  componentDidMount() {
    let { goods_id } = this.props.match.params;
    myaxios.get("goods/detail", {
      params: {
        goods_id,
      }
    }).then((res) => {
      console.log(res);
      this.setState({
        goodInfo: res,
        showSwiper: true
      })

      // 初次进入商品详情的时候，判断该商品是否已经被收藏
      let collections_str = localStorage.getItem("collections");
      let collections = JSON.parse(collections_str || "[]");
      // 对收藏进行循环遍历
      // 判断该商品是否在收藏中
      let index = collections.findIndex(v => {
        return v.goods_id === parseInt(goods_id)?true:false;
      })
      // 如果有收藏过
      if (index !== -1) {
        this.setState({
          showCollect: true
        })
      }
    }).catch(err => console.log(err))
  }
  // 点击收藏
  handleCollect = (params) => {
    let collections_str = localStorage.getItem("collections");
    // collections代表收藏的数据
    let collections = JSON.parse(collections_str || "[]");
    // 对收藏进行循环遍历
    // 判断该商品是否在收藏中
    let index = collections.findIndex(v => {
      return v.goods_id === parseInt(this.state.goodInfo.goods_id)?true:false;
    })
    // 如果是在收藏中
    if (index !== -1) {
      collections.splice(index, 1);
      Toast.info("取消收藏成功");
      this.setState({
        showCollect: false
      })
    } else {
      Toast.info("收藏成功", 1);
      collections.push(this.state.goodInfo);
      this.setState({
        showCollect: true
      })
    }
    localStorage.setItem("collections", JSON.stringify(collections))
  }
  // 点击购物车跳转到购物车页面
  gotoCart = (params) => {
    this.props.history.push("/cart")
  }
  // 将商品加入到购物车
  addToCart = (params) => {
    // 从本地储存获取购物车数据
    let carts_str = localStorage.getItem("carts");
    let carts = JSON.parse(carts_str || "[]");
    // 获取goods_id
    let {goods_id} = this.props.match.params;
    let index = carts.findIndex(v=>{
      return v.goods_id === parseInt(goods_id)?true:false
    })
    // 表示购物车数据里没有该商品数据
    if(index === -1){
      let goods_info = this.state.goodInfo;
      goods_info.num = 1; //第一次添加 数量为1
      goods_info.checked = true; //在购物车中默认被选中
      carts.push(goods_info)
    }else{
      carts[index].num++;
    }
    Toast.info("加入购物车成功");
    localStorage.setItem("carts",JSON.stringify(carts));
  }
  // 点击立即购买跳转到购买页面
  pay = (params) => {
    this.props.history.push("/pay");
  }
  
  render() {
    return (
      <div className="yg-detail">
        <NavBar
          className="yg-detail-nav"
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => window.history.go(-1)}>
          商品详情
        </NavBar>
        {/* 首页轮播图开始 */}
        <div className="yg-detail-swiper">
          {this.state.showSwiper && (
            <Carousel autoplay={true} infinite>
              {this.state.goodInfo.pics && this.state.goodInfo.pics.map(val => (
                <div
                  key={val}
                  className="imageWrapper"
                  style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                >
                  <img
                    src={val.pics_mid}
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top' }}
                    onLoad={() => {
                      // fire window resize event to change height
                      window.dispatchEvent(new Event('resize'));
                      this.setState({ imgHeight: 'auto' });
                    }}
                  />
                </div>
              ))}
            </Carousel>
          )}
        </div>
        {/* 首页轮播图结束 */}
        {/* 价格和分享区域开始 */}
        <div className="yg-detail-price">
          <div className="price-left">
            <span className="title1">￥{this.state.goodInfo.goods_price}</span>
          </div>
          <div className="price-right">
            <i className="iconfont icon-fenxiang"></i>
            <i className={this.state.showCollect ? "iconfont icon-shoucang active" : "iconfont icon-shoucang"}
              onClick={this.handleCollect}></i>
          </div>
        </div>
        {/* 价格和分享区域结束 */}
        {/* 商品的标题的开始 */}
        <div className="yg-detail-title">{this.state.goodInfo.goods_name}</div>
        {/* 商品的标题的结束 */}
        {/* 图文详情开始 */}
        <div className="yg-detail-richtext">
          <div className="richtext-title">图文详情</div>
          <div className="richtext-content"
            dangerouslySetInnerHTML={{ __html: this.state.goodInfo.goods_introduce }}></div>
        </div>
        {/* 图文详情结束 */}
        {/* 底部的工具栏开始 */}
        <div className="yg-detail-bottom">
          <div className="bottom-contact">
            <i className="iconfont icon-lianxikefu"></i>
            <div className="title">联系客服</div>
          </div>
          <div className="bottom-cart" onClick={this.gotoCart}>
            <i className="iconfont icon-gouwuche"></i>
            <div className="title">购物车</div>
          </div>
          <div className="bottom-addToCart" onClick={this.addToCart}>
            <span className="title1">加入购物车</span>
          </div>
          <div className="bottom-buy" onClick={this.pay}>
            <span className="title2">立即购买</span>
          </div>
        </div>
        {/* 底部的工具栏结束 */}
      </div>
    )
  }
}
